<template>
  <div class="calls" v-if="data">
    <mt-header fixed style="background: transparent">
      <mt-button icon="back" @click="$router.back()" slot="left"></mt-button>
    </mt-header>
    <div class="suspend" v-show="hide" @touchstart="hides"><img src="/image/home/stare.png" alt="" /></div>
    <video ref="video" @ended="aud" class="video" @touchstart="vplay" disablePictureInPicture controlslist="nodownload" autoplay controls :poster='data.img' :src="data.video"></video>
    <div class="bottoms">
      <div>
        <div>
          <span>{{data.title}}</span>
        </div>
        <button @click="$router.push(`${data.vdic}`)">去挂号</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props:['id'],
  data() {
    return {
      data:null,vid:this.id,hide:false,paused:false,
    }
  },
  methods: {
    getData() {
      this.axios.get(`/video_one?vdid=${this.vid}`).then(res=>{
        this.data = res.data.data[0]
      })
    },
    aud(){
      this.vid++
      this.axios.get(`/video_one?vdid=${this.vid}`).then(res=>{
        this.data = res.data.data[0]
      })
    },
    hides(){
      this.$refs.video.play()
      this.hide = false
    },
    vplay(){
      if(!this.data)return
      if(!this.$refs.video.paused){
        this.$refs.video.pause()
        this.hide = true
      }else{
        this.$refs.video.play()
        this.hide = false
      }
    },
  },
  watch:{
    paused(){
      this.vplay()
    }
  },
  mounted(){
    this.getData()
    this.vplay()
  },
};
</script>

<style lang="scss" scoped>
.video{
  width: 100vw;
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}
.calls {
  width: 100vw;
  height: 100vh;
  background: #000;
  overflow: hidden;
  .suspend {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    > img {
      width: 15vw;
      display: block;
    }
  }
  .bottoms {
    position: absolute;
    bottom: 1vh;
    left: 2vw;
    color: #fff;
    background-image: linear-gradient(0deg,rgb(0, 0, 0),rgba(100, 100, 100,.3));
    border-radius: 1rem;
    width: 92vw;
    padding: 1vh 2vw;
    > div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      > div {
        height: 10vw;
        position: relative;
        > img {
          display: inline-block;
          height: 100%;
        }
        >span{
          display: inline-block;
          position: absolute;
          width: 30vh;
          top: 50%;
          transform: translateY(-50%);
          margin-left: 1vw;
        }
      }
      >button{
        background-color: #02DEBB;
        border: none;
        border-radius: 2vw;
        color:#fff;
        height: 2.5rem;
      }
    }
  }
}
</style>
